<template>
  <div class="home">
    <header class="header">猫眼电影</header>
    <main>
      <router-view></router-view>
    </main>
    <footer class="footer">
      <tab-bar></tab-bar>
    </footer>
  </div>
</template>

<script>
import TabBar from "../components/TabBar";
import footerTabs from "../assets/jsons/footerTabs.json";

export default {
  name: "home",
  components: {
    TabBar
  },
  data: function() {
    // 当前路径（浏览器中url中的路径）
    const path = this.$route.path; // /home/movie/hot
    // 查找符合条件的tab
    // 查找条件：tab的to中如果包含了path，那么就匹配
    // 查找完成返回的是查找到的tab
    const matchTab = footerTabs.find(({ to }) => {
      // console.log(to,path);
      // return new RegExp(to).test(path);
      return path.includes(to);
    });
    // 把tab中的title赋值给data.title
    return {
      title: matchTab.title
    };
  },
  beforeRouteUpdate(to, from, next) {
    const path = to.path;
    // 查找符合条件的tab
    // 查找条件：tab的to中如果包含了path，那么就匹配
    const matchTab = footerTabs.find(({ to }) => {
      return path.includes(to);
    });
    this.title = matchTab.title;

    next();
  }
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 500px;
  .header,
  .footer {
    flex: 0;
    flex-basis: auto;
    height: auto;
  }
  header {
    height: 0.5rem;
    background: #e54847;
    font-size: 0.18rem;
    color: white;
    line-height: 0.5rem;
    text-align: center;
  }
  main {
    flex: 1;
    min-height: 0px;
  }
}
</style>
